import React from 'react';
import { Dropdown, Menu, PopConfirm, Message } from '@teamix/ui';
import { ButtonIcon } from '@alife/devops-ui';
import { postServiceLog } from 'api';
import intl from '../../../../../../../../locale';

export default class ExtraBtn extends React.Component {
  state = {
    visible: false,
    submitting: false,
  };

  handleRemove = () => {
    if (this.state.submitting) {
      return;
    }
    const { plugin } = this.props;
    postServiceLog({
      service: plugin.key,
      authorized: false,
    })
      .then(() => {
        this.setState({
          visible: false,
          submitting: false,
        });

        Message.success({
          title: intl.get({
            id: 'code-assets.containers.projectSecurityTab.disablePippoint.RemovedSuccessfully',
            defaultMessage: '移除成功',
          }),
        });

        window.location.reload();
      })
      .catch(() => {
        this.setState({
          submitting: false,
        });
      });
  };

  render() {
    const { plugin, serviceData } = this.props;
    // 没开启不显示...修改或移除
    if (serviceData && plugin.key && serviceData[plugin.key] && !serviceData[plugin.key].enabled) {
      return null;
    }
    return (
      <Dropdown
        trigger={
          <ButtonIcon
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
              const { visible } = this.state;
              this.setState({
                visible: !visible,
              });
            }}
            name="more-line"
            style={{ marginLeft: 8 }}
          />
        }
        triggerType="hover"
        align="cl cr"
        // offset={[0, 8]}
        hasSelectedIcon={false}
        visible={this.state.visible}
        onVisibleChange={(visible, type) => {
          if (type === 'docClick') {
            this.setState({
              visible,
            });
          }
        }}
      >
        <Menu>
          <Menu.Item key="new">
            <PopConfirm
              triggerType="click"
              align="b"
              type="warning"
              title={intl.get({
                id: 'code-assets.containers.projectSecurityTab.disablePippoint.ConfirmRemoval',
                defaultMessage: '确认移除',
              })}
              needAdjust
              content={intl.get({
                id: 'code-assets.containers.projectSecurityTab.disablePippoint.MakeSureThatThePipeline',
                defaultMessage: '请确认执行检测的流水线已废弃或删除，否则运行检测后将再次自动同步',
              })}
              onConfirm={() => {
                this.handleRemove();
              }}
              confirmProps={{ loading: this.state.submitting }}
              onCancel={this.onCancel}
              popupProps={{ loading: this.state.submitting }}
              trigger={
                <div className="remove-text">
                  {intl.get({
                    id: 'code-assets.containers.projectSecurityTab.disablePippoint.Remove',
                    defaultMessage: '移除',
                  })}
                </div>
              }
            />
          </Menu.Item>
        </Menu>
      </Dropdown>
    );
  }
}
